---
title: "Alert"
description: "Alerts are temporary notifications that provide concise feedback about an action or event."
---

import {alertContent} from "@/content/components/alert";

# Alert

Alerts are temporary notifications that provide concise feedback about an action or event.

<ComponentLinks component="alert" />

---

<CarbonAd />

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add alert",
    npm: "npm install @heroui/alert",
    yarn: "yarn add @heroui/alert",
    pnpm: "pnpm add @heroui/alert",
    bun: "bun add @heroui/alert",
  }}
/>

## Import

<ImportTabs
  commands={{
    main: 'import {Alert} from "@heroui/react";',
    individual: 'import {Alert} from "@heroui/alert";',
  }}
/>

## Usage

<CodeDemo title="Usage" files={alertContent.usage} />

### Colors

Alert comes with 6 color variants to convey different meanings.

<CodeDemo title="Colors" files={alertContent.colors} />

### Variants

<CodeDemo title="Variants" files={alertContent.variants} />

### Radius

<CodeDemo title="Radius" files={alertContent.radius} />

### Custom Icon

By default, Alert displays an appropriate icon based on the `color` prop. You can override this by providing a custom icon using the `icon` prop.

<CodeDemo title="Custom Icon" files={alertContent.withIcon} />

### Without Icon

You can hide the icon by setting the `hideIcon` prop to `true`.

<CodeDemo title="Without Icon" files={alertContent.withoutIcon} />

### Without Icon Wrapper

You can hide the icon wrapper by setting the `hideIconWrapper` prop to `true`.

<CodeDemo title="Without Icon Wrapper" files={alertContent.withoutIconWrapper} />

### With Action

Alert supports an `endContent` prop for additional actions.

<CodeDemo title="With Action" files={alertContent.withAction} />

### Controlled Visibility

You can control the alert visibility using the `isVisible` and `onVisibleChange` props.

<CodeDemo title="Controlled" files={alertContent.controlled} />

### Custom Styles

You can customize the alert by passing custom Tailwind CSS classes to the component slots.

<CodeDemo title="Custom Styles" files={alertContent.customStyles} />

### Custom Implementation

You can use the `useAlert` hook to create your own alert component.

<CodeDemo showPreview={false} title="Custom Implementation" files={alertContent.customImpl} />

<Spacer y={4} />

## Data Attributes

Alert has the following attributes on the `base` element:

- **data-visible**: When the alert is visible
- **data-closeable**: When the alert can be closed
- **data-has-title**: When the alert has a title
- **data-has-description**: When the alert has a description

<Spacer y={4} />

### Slots

Alert has the following slots:

- `base`: The main alert container element
- `title`: The title element
- `description`: The description element
- `mainWrapper`: The wrapper for the title and description content
- `closeButton`: The close button element
- `iconWrapper`: The wrapper for the alert icon
- `alertIcon`: The alert icon element

## Accessibility

- Alert has role of `alert`
- Close button has aria-label="Close" by default
- When closed, alert is removed from the DOM

<Spacer y={4} />

## API

### Alert Props

<APITable
  data={[
    {
      attribute: "title",
      type: "ReactNode",
      description: "The alert title",
      default: "-"
    },
    {
      attribute: "icon", 
      type: "ReactNode",
      description: "The alert icon - overrides the default icon",
      default: "-"
    },
    {
      attribute: "description",
      type: "ReactNode", 
      description: "The alert description",
      default: "-"
    },
    {
      attribute: "color",
      type: "default | primary | secondary | success | warning | danger",
      description: "The alert color theme",
      default: "default"
    },
    {
      attribute: "variant",
      type: "solid | bordered | flat | faded",
      description: "The alert variant",
      default: "flat"
    },
    {
      attribute: "radius",
      type: "none | sm | md | lg | full",
      description: "The alert border radius",
      default: "md"
    },
    {
      attribute: "startContent",
      type: "ReactNode",
      description: "The alert start content",
      default: "-"
    },
    {
      attribute: "endContent",
      type: "ReactNode",
      description: "The alert end content", 
      default: "-"
    },
    {
      attribute: "isVisible",
      type: "boolean",
      description: "Whether the alert is visible",
      default: "-"
    },
    {
      attribute: "isClosable",
      type: "boolean",
      description: "Whether the alert can be closed",
      default: "false"
    },
    {
      attribute: "hideIcon",
      type: "boolean",
      description: "Whether the icon is hidden",
      default: "false"
    },
    {
      attribute: "hideIconWrapper",
      type: "boolean",
      description: "Whether the icon wrapper is hidden",
      default: "false"
    },
    {
      attribute: "closeButtonProps",
      type: "ButtonProps",
      description: "Props for the close button",
      default: "-"
    }
  ]}
/>

### Alert Events

<APITable
  data={[
    {
      attribute: "onClose",
      type: "() => void",
      description: "Handler called when the close button is clicked",
      default: "-"
    },
    {
      attribute: "onVisibleChange",
      type: "(isVisible: boolean) => void",
      description: "Handler called when the alert visibility changes",
      default: "-"
    }
  ]}
/>